Veb-kontentingiz uchun murakkab, dinamik raqamlash tizimlarini yaratish uchun CSS hisoblagichlari kuchini oching. Ilg'or usullar bilan oddiy ro'yxatlardan tashqariga chiqing.
CSS Hisoblagich Funksiyalari: Ilg'or Ro'yxat Raqamlash Tizimlariga Chuqur Kirish
Veb-dasturchi sifatida biz tez-tez raqamlangan ro'yxatlarga ehtiyoj sezamiz. Oddiy, ketma-ket raqamlash uchun standart HTML <ol> elementi bu vazifani yaxshi bajaradi. Ammo talablar murakkablashganda nima bo'ladi? Agar siz 1.1.2 kabi ichki joylashgan bo'limlarni raqamlashingiz, maxsus uslubdagi hisoblagichlar yaratishingiz yoki hatto sarlavhalar yoki rasmlar kabi ro'yxatning bir qismi bo'lmagan elementlarni raqamlashingiz kerak bo'lsa-chi? Ko'p yillar davomida bu vazifalar JavaScript yoki noqulay server tomonidagi mantiqni talab qilgan. Bugungi kunda bizda kuchli, tabiiy yechim bor: CSS hisoblagichlari.
CSS hisoblagichlari, mohiyatan, CSS tomonidan qo'llab-quvvatlanadigan o'zgaruvchilardir, ularning qiymatlarini siz belgilagan qoidalar bo'yicha oshirish mumkin. Ular an'anaviy tartiblangan ro'yxatlar imkoniyatlaridan ancha yuqori bo'lgan murakkab raqamlash va belgilash tizimlarini yaratishning sof deklarativ usulini taqdim etadi. Ushbu chuqur tahlil sizni CSS hisoblagichlarining asosiy tamoyillaridan tortib, veb-kontentingizning tuzilishi va aniqligini oshiradigan ilg'or texnikalar va amaliy, real hayotiy qo'llanilishigacha yo'naltiradi.
Asoslarni Tushunish: CSS Hisoblagichlarining Uch Ustuni
Butun CSS hisoblagich tizimi uchta asosiy xususiyatga asoslangan. Ushbu xususiyatlarning birgalikda qanday ishlashini tushunish bu xususiyatni o'zlashtirishning kalitidir. Buni oddiy jarayon deb o'ylang: siz hisoblagichni ishga tushirasiz, unga qachon oshirish kerakligini aytasiz va keyin uning qiymatini ko'rsatasiz.
1-ustun: counter-reset - Hisoblagichingizni Ishga Tushirish
Har qanday hisoblash jarayonidagi birinchi qadam - bu boshlang'ich nuqtani belgilashdir. counter-reset xususiyati hisoblagichni yaratish va/yoki qayta o'rnatish uchun ishlatiladi. Siz odatda buni hisoblash boshlanishini xohlagan konteyner elementiga qo'llaysiz.
Sintaksis:
counter-reset: <counter-name> [ <integer> ];
<counter-name>: Bu sizning hisoblagichingizga beradigan nom (masalan,section-counter,step,my-awesome-counter). U harflarning katta-kichikligiga sezgir.[ <integer> ]: Bu ixtiyoriy qiymat hisoblagich qaysi songa qayta o'rnatilishi kerakligini belgilaydi. Agar ko'rsatilmasa, u sukut bo'yicha0ga teng bo'ladi. Siz manfiy qiymatlardan foydalanishingiz mumkin.
Masalan, kitob uchun chapter nomli hisoblagichni boshlash uchun siz uni <body> yoki asosiy konteyner <div> ga qo'llashingiz mumkin:
body {
counter-reset: chapter; /* 'chapter' hisoblagichini ishga tushiradi, qiymati 0 */
}
.appendix {
counter-reset: appendix-counter -1; /* 'appendix-counter'ni ishga tushiradi, -1 dan boshlanadi */
}
Muhim tushunchalardan biri bu doiralash (scoping). Agar siz counter-reset ni ichki joylashgan elementda ishlatsangiz, u o'sha element doirasida ushbu hisoblagichning yangi, mustaqil nusxasini yaratadi.
2-ustun: counter-increment - Hisobni Oldinga Surish
Hisoblagichingiz ishga tushirilgandan so'ng, uning qiymatini o'zgartirish usuli kerak. counter-increment xususiyati hisoblagichning qiymatini oshiradi (yoki kamaytiradi), odatda u ishlatilishidan oldin.
Sintaksis:
counter-increment: <counter-name> [ <integer> ];
<counter-name>: Oshiriladigan hisoblagich nomi.[ <integer> ]: Hisoblagichni qanchaga oshirish kerakligini belgilaydigan ixtiyoriy qiymat. Sukut bo'yicha qiymat1. Hech narsa qilmaslik uchun0yoki kamaytirish uchun manfiy qiymatlardan foydalanishingiz mumkin.
Siz odatda buni hisoblamoqchi bo'lgan elementlarga qo'llaysiz. Masalan, agar siz boblarni raqamlayotgan bo'lsangiz, har bir bob sarlavhasini ifodalovchi <h1> tegida hisoblagichni oshirasiz:
h1.chapter-title {
counter-increment: chapter; /* 'chapter'ni 1 ga oshiradi */
}
3-ustun: counter() - Qiymatni Ko'rsatish
Hisoblagichni ishga tushirish va oshirish parda ortida sodir bo'ladi. Hisoblagichni ko'rinadigan qilish uchun uning qiymatini ko'rsatishingiz kerak. Bu deyarli har doim ::before yoki ::after psevdo-elementining content xususiyati ichida counter() funksiyasidan foydalangan holda amalga oshiriladi.
Sintaksis:
content: counter(<counter-name>);
Bularning barchasini birlashtirib, oddiy maxsus raqamlangan ro'yxat yaratamiz:
/* 1. Konteynerda hisoblagichni ishga tushirish */
.custom-list {
counter-reset: my-list-counter;
list-style-type: none; /* Sukut bo'yicha ro'yxat belgilarini yashirish */
padding-left: 0;
}
/* 2. Har bir elementda hisoblagichni oshirish */
.custom-list li {
counter-increment: my-list-counter;
margin-bottom: 0.5em;
}
/* 3. Hisoblagich qiymatini ko'rsatish */
.custom-list li::before {
content: counter(my-list-counter) ". ";
font-weight: bold;
color: #4a90e2;
margin-right: 0.5em;
}
Ushbu CSS bilan har qanday <ul class="custom-list"> endi <ol> tegidan foydalanmasdan raqamlangan ro'yxat (1., 2., 3. va hokazo) sifatida ko'rsatiladi. Bu oddiy misol allaqachon tarkibni (HTML) taqdimotdan (CSS) ajratishni namoyish etadi, bu sizga tartiblanmagan ro'yxatni faqat CSS yordamida tartiblangan ro'yxatga o'zgartirish imkonini beradi.
Oddiy Ro'yxatlardan Tashqariga Chiqish: Ilg'or Hisoblagich Texnikalari
CSS hisoblagichlarining haqiqiy kuchi siz oddiy ketma-ketliklardan tashqariga chiqqaningizda ochiladi. Keling, murakkab raqamlash tizimlarini yaratishga imkon beradigan ilg'or funksiyalar va xususiyatlarni o'rganamiz.
Rejalar va Ilovalar uchun Ichki Hisoblagichlar Yaratish
Hisoblagichlar uchun eng jozibali qo'llanilishlardan biri bu yuridik hujjatlar, texnik spetsifikatsiyalar yoki rejalarda topiladigan ichki, ierarxik raqamlashni yaratishdir (masalan, 1., 1.1., 1.1.1., 1.2.). Bunga counters() funksiyasi yordamida erishiladi.
counters() funksiyasi counter() ga o'xshaydi, lekin u ichki joylashuv uchun mo'ljallangan. U joriy doiradagi bir xil nomga ega bo'lgan barcha hisoblagichlarning qiymatlarini oladi va ularni belgilangan satr ajratgich bilan birlashtiradi.
Sintaksis:
content: counters(<counter-name>, '<separator-string>');
Ko'p darajali ro'yxatni qanday yaratish mumkin:
.outline {
counter-reset: section; /* Yuqori darajada 'section' hisoblagichini qayta o'rnatish */
list-style-type: none;
padding-left: 1em;
}
.outline li {
counter-increment: section; /* Har bir ro'yxat elementi uchun oshirish */
margin-bottom: 0.5em;
}
/* Har qanday ichki ro'yxat uchun hisoblagichni qayta o'rnatish */
.outline ul {
counter-reset: section;
}
.outline li::before {
/* Ichki hisoblagich qiymatlarini nuqta bilan birlashtirib ko'rsatish */
content: counters(section, ".") " ";
font-weight: bold;
margin-right: 0.5em;
}
Bu misolda, ichki ul dagi counter-reset: section; kalit hisoblanadi. U o'sha daraja uchun `section` hisoblagichining yangi, ichki nusxasini yaratadi. Keyin `counters()` funksiyasi DOM daraxti bo'ylab yuqoriga qarab harakatlanadi, har bir darajadagi `section` hisoblagichining qiymatini yig'adi va ularni nuqta bilan birlashtiradi. Natijada klassik 1., 1.1., 1.2., 2., 2.1. raqamlash sxemasi hosil bo'ladi.
list-style-type yordamida Hisoblagich Formatlarini Moslashtirish
Agar sizga Rim raqamlari yoki alifbo tartibi kerak bo'lsa-chi? Ham counter(), ham counters() funksiyalari `list-style-type` xususiyati uchun mavjud qiymatlardan foydalanib, raqamlash uslubini belgilaydigan ixtiyoriy ikkinchi argumentni qabul qilishi mumkin.
Sintaksis:
content: counter(<counter-name>, <list-style-type>);
Keng tarqalgan list-style-type qiymatlari quyidagilardan iborat:
decimal(1, 2, 3) - Sukut bo'yichadecimal-leading-zero(01, 02, 03)lower-roman(i, ii, iii)upper-roman(I, II, III)lower-alpha/lower-latin(a, b, c)upper-alpha/upper-latin(A, B, C)lower-greek(α, β, γ)georgian,armenianva xalqaro yozuvlar uchun yana ko'plab turlari.
Keling, har bir daraja uchun turli formatlarga ega rejani uslublaymiz:
.detailed-outline > li::before {
content: counter(section, upper-roman) ". "; /* 1-daraja: I, II, III */
}
.detailed-outline > li > ul > li::before {
content: counter(section, upper-alpha) ". "; /* 2-daraja: A, B, C */
}
.detailed-outline > li > ul > li > ul > li::before {
content: counter(section, decimal) ". "; /* 3-daraja: 1, 2, 3 */
}
Hisoblagichlarni Satrlar va Atributlar bilan Birlashtirish
content xususiyati faqat hisoblagich funksiyasi bilan cheklanmaydi. Siz yuqori darajada tavsiflovchi yorliqlar yaratish uchun satrlarni, attr() kabi boshqa CSS funksiyalarini va bir nechta hisoblagichlarni birlashtirishingiz mumkin.
h2::before {
content: "Bo'lim " counter(section) ": ";
}
.footnote::before {
counter-increment: footnote;
content: "[" counter(footnote) "]";
font-size: 0.8em;
vertical-align: super;
margin-right: 0.2em;
}
/* data-atributidan olish uchun attr() dan foydalanish */
blockquote::before {
counter-increment: quote;
content: "Iqtibos #" counter(quote) " (Manba: " attr(cite) ") ";
display: block;
font-style: italic;
color: #666;
}
O'sishni Boshqarish: Qadamlash va Kamaytirish
counter-increment xususiyati qadam qiymatini boshqarish uchun ikkinchi argumentni olishi mumkin. Bu sizga ikkiga, beshga yoki hatto manfiy sonni berib orqaga sanash imkonini beradi.
Ikkiga sanash (juft sonlar):
.even-list {
counter-reset: even-counter 0;
}
.even-list li {
counter-increment: even-counter 2;
}
.even-list li::before {
content: counter(even-counter);
}
Orqaga sanashni yaratish:
.countdown {
counter-reset: launch 11; /* 11 ga qayta o'rnatishdan boshlash */
}
.countdown li {
counter-increment: launch -1; /* Har safar 1 ga kamaytirish */
}
.countdown li::before {
content: counter(launch);
}
Ushbu oddiy usul nostandart ketma-ketlikni talab qiladigan maxsus ro'yxatlar yoki UI elementlari uchun ajablanarli darajada kuchli.
Amaliy Qo'llanilish Holatlari: CSS Hisoblagichlari Qayerda Yorqin Namoyon Bo'ladi
Nazariya ajoyib, lekin keling, bu usullar real muammolarni qanday hal qilishini ko'rib chiqaylik. CSS hisoblagichlari faqat ro'yxatlar uchun emas; ular butun hujjatni tuzishi mumkin.
1-qo'llanilish holati: Sarlavhalarni Avtomatik Raqamlash
Eng klassik va foydali qo'llanilishlardan biri bu hujjat sarlavhalarini avtomatik raqamlashdir. Bu sizning bo'lim raqamlaringiz har doim to'g'ri bo'lishini ta'minlaydi, hatto siz bo'limlarni qayta tartiblasangiz, qo'shsangiz yoki olib tashlasangiz ham. Qo'lda yangilanishlar talab qilinmaydi!
body {
counter-reset: h1-counter;
}
h1 {
counter-reset: h2-counter; /* h1 paydo bo'lganda har safar h2 hisoblagichini qayta o'rnatish */
}
h2 {
counter-reset: h3-counter; /* h2 paydo bo'lganda har safar h3 hisoblagichini qayta o'rnatish */
}
h1::before {
counter-increment: h1-counter;
content: counter(h1-counter) ". ";
}
h2::before {
counter-increment: h2-counter;
content: counter(h1-counter) "." counter(h2-counter) ". ";
}
h3::before {
counter-increment: h3-counter;
content: counter(h1-counter) "." counter(h2-counter) "." counter(h3-counter) ". ";
}
Ushbu nafis yechim mustahkam, o'z-o'zini ta'minlaydigan hujjat tuzilmasini yaratadi. Sehr ota-ona sarlavhasida bola hisoblagichini qayta o'rnatishda yotadi, bu har bir darajada raqamlashni to'g'ri doiralaydi.
2-qo'llanilish holati: Rasm va Shakl Izohlari
Uzoq maqoladagi rasmlar, jadvallar va tasvirlarni avtomatik raqamlash professional ko'rinish beradi va ularga matnda havola qilishni osonlashtiradi.
body {
counter-reset: figure-counter table-counter;
}
figure figcaption::before {
counter-increment: figure-counter;
content: "Shakl " counter(figure-counter) ": ";
font-weight: bold;
}
table caption::before {
counter-increment: table-counter;
content: "Jadval " counter(table-counter) ": ";
font-weight: bold;
}
Endi sahifadagi har bir <figcaption> va <caption> avtomatik ravishda to'g'ri, ketma-ket raqam bilan prefikslanadi.
3-qo'llanilish holati: Ilg'or Qadamma-qadam Qo'llanmalar va Darsliklar
Darsliklar, retseptlar yoki qo'llanmalar uchun aniq qadam raqamlash juda muhim. CSS hisoblagichlari sizga vizual jihatdan boy, ko'p qismli qadamlarni yaratish imkonini beradi.
.tutorial {
counter-reset: main-step;
font-family: sans-serif;
}
.step {
counter-increment: main-step;
counter-reset: sub-step;
border: 1px solid #ccc;
padding: 1em;
margin: 1em 0;
position: relative;
}
.step > h3::before {
content: "Qadam " counter(main-step, decimal-leading-zero);
background-color: #333;
color: white;
padding: 0.2em 0.5em;
border-radius: 4px;
margin-right: 1em;
}
.sub-step {
counter-increment: sub-step;
margin-left: 2em;
margin-top: 0.5em;
}
.sub-step::before {
content: counter(main-step, decimal) "." counter(sub-step, lower-alpha);
font-weight: bold;
margin-right: 0.5em;
}
Bu aniq vizual ierarxiyani yaratadi, bunda asosiy qadamlar ko'zga ko'ringan uslubdagi raqamni (masalan, "Qadam 01") oladi va quyi qadamlar ichki yorliqlarni (masalan, "1.a", "1.b") oladi.
4-qo'llanilish holati: Tanlangan Elementlarni Hisoblash
Bu yanada dinamik va interaktiv qo'llanilish holati. Siz hisoblagichlardan foydalanib, hech qanday JavaScriptsiz foydalanuvchi tomonidan tanlangan elementlarning, masalan, belgilangan katakchalarning umumiy sonini hisoblab borishingiz mumkin.
.checklist-container {
counter-reset: checked-items 0;
}
/* Faqat katakcha belgilangan bo'lsa hisoblagichni oshirish */
.checklist-container input[type="checkbox"]:checked {
counter-increment: checked-items;
}
/* Umumiy hisobni alohida elementda ko'rsatish */
.total-count::after {
content: counter(checked-items);
font-weight: bold;
}
/* HTML quyidagicha ko'rinishda bo'ladi: */
/*
Jami tanlangan elementlar:
*/
Foydalanuvchi katakchalarni belgilaganida va belgisini olganida, .total-count::after da ko'rsatilgan raqam avtomatik ravishda yangilanadi. Bu hisoblagichlarning element holatlariga qanday munosabatda bo'lishini namoyish etadi va oddiy, faqat CSS-ga asoslangan UI fikr-mulohazalari uchun imkoniyatlar ochadi.
Maxsus Imkoniyatlar va SEO Masalalari
CSS hisoblagichlari vizual taqdimot uchun juda kuchli bo'lsa-da, ularning maxsus imkoniyatlar va SEO ga ta'sirini hisobga olish juda muhim. content xususiyati tomonidan yaratilgan tarkib kulrang zonada yashaydi.
Tarixan, ekran o'quvchilari ::before va ::after psevdo-elementlaridan tarkibni o'qimas edi. Garchi zamonaviy ekran o'quvchilari takomillashgan bo'lsa-da, qo'llab-quvvatlash hali ham nomuvofiq bo'lishi mumkin. Vizual raqamlangan ro'yxat yordamchi texnologiya foydalanuvchisiga oddiy, raqamlanmagan ro'yxat sifatida e'lon qilinishi mumkin, bu esa ularning muhim tarkibiy kontekstni yo'qotishiga sabab bo'ladi.
ARIA Yechimi
Siz CSS hisoblagichlarini standart <ol> funksionalligini almashtirish uchun ishlatganingizda, siz HTML elementi taqdim etadigan semantikani olib tashlayapsiz. Siz bu semantik ma'noni Maxsus Imkoniyatli Boy Internet Ilovalari (ARIA) rollari yordamida qaytarishingiz kerak.
<div> lar bilan qurilgan maxsus raqamlangan ro'yxat uchun siz quyidagicha qilishingiz mumkin:
<div role="list">
<div role="listitem">Birinchi element</div>
<div role="listitem">Ikkinchi element</div>
</div>
Biroq, eng yaxshi amaliyot ko'pincha iloji boricha eng semantik HTML dan foydalanishdir. Agar sizning kontentingiz ro'yxat bo'lsa, <ol> dan foydalaning. Siz hali ham sukut bo'yicha markerni yashirib (list-style: none) va ::before bilan o'zingizning maxsus hisoblagichingizni qo'llab, uning belgilarini uslublashingiz mumkin. Shunday qilib, siz ikkala dunyoning eng yaxshisini olasiz: mustahkam uslub va o'rnatilgan semantika.
Raqamlangan sarlavhalar kabi ro'yxat bo'lmagan elementlar uchun maxsus imkoniyatlar hikoyasi yaxshiroq. Yaratilgan raqam sof taqdimotga oid; semantik tuzilma <h1>, <h2> teglarining o'zi tomonidan uzatiladi, ularni ekran o'quvchilari to'g'ri e'lon qiladi.
SEO Oqibatlari
Maxsus imkoniyatlarga o'xshab, qidiruv tizimi o'rgimchaklari CSS tomonidan yaratilgan kontentni tahlil qilishi va indekslashi mumkin yoki yo'q. Umumiy fikr shundaki, siz hech qachon muhim, noyob kontentni `content` xususiyati ichiga joylashtirmasligingiz kerak. Hisoblagichlar tomonidan yaratilgan raqamlar odatda noyob, muhim kontent emas - ular tarkibiy metama'lumotlardir. Shunday qilib, ularni sarlavhalar yoki rasmlarni raqamlash uchun ishlatish odatda SEO uchun xavfsiz hisoblanadi, chunki asosiy tarkib HTML ning o'zida.
Brauzer Qo'llab-quvvatlashi
CSS hisoblagichlarining eng yaxshi jihatlaridan biri bu ularning ajoyib brauzer qo'llab-quvvatlashidir. Ular o'n yildan ortiq vaqt davomida barcha asosiy brauzerlarda qo'llab-quvvatlanib kelinmoqda. caniuse.com ma'lumotlariga ko'ra, `counter-increment` va `counter-reset` dunyo bo'ylab brauzerlarning 99% dan ortig'i tomonidan qo'llab-quvvatlanadi. Bunga Chrome, Firefox, Safari va Edge ning barcha zamonaviy versiyalari kiradi va hatto Internet Explorer 8 gacha boradi.
Bu shuni anglatadiki, siz bugungi kunda CSS hisoblagichlaridan ishonch bilan foydalanishingiz mumkin, murakkab zaxira variantlarga yoki dunyo bo'ylab foydalanuvchilaringizning aksariyati uchun moslik muammolari haqida qayg'urishga hojat yo'q.
Xulosa
CSS hisoblagichlari raqamlashni qattiq, HTML ga bog'liq xususiyatdan moslashuvchan va dinamik dizayn vositasiga aylantiradi. counter-reset, counter-increment va counter()/counters() funksiyalarining asosiy uchligini o'zlashtirib, siz oddiy ro'yxatlardan tashqariga chiqishingiz va sahifangizdagi har qanday element uchun murakkab, o'z-o'zini ta'minlaydigan raqamlash tizimlarini yaratishingiz mumkin.
Texnik hujjatlarda boblar va rasmlarni avtomatik raqamlashdan tortib, interaktiv nazorat ro'yxatlari va chiroyli uslubdagi darsliklar yaratishgacha, CSS hisoblagichlari kuchli, samarali va sof CSS-ga asoslangan yechimni taklif etadi. Maxsus imkoniyatlarni yodda tutish va semantik HTML ni asos sifatida ishlatish muhim bo'lsa-da, CSS hisoblagichlari zamonaviy front-end dasturchisining toza kod va aqlliroq, tuzilgan tarkib yaratish uchun asboblar to'plamidagi muhim vositadir.